<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="author" content="94hi.tw">
    <meta name="copyright" content="Copyright (c) 94hi.tw">
    <meta name="description" content="94hi.tw就是嗨！">
    <meta name="keywords" content="94hi,94hi.tw,94hi.tw就是嗨！">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="MobileOptimized" content="320">
    <meta name="format-detection" content="telephone=no, address=no, email=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <title>遊戲預購：各專案頁_我要預購</title>
    <link rel="stylesheet" href="../assets/css/core.css?v=f99b2c77">
    <link rel="stylesheet" href="../assets/css/ui-form.css?v=6179fa28">
    <link rel="stylesheet" href="../assets/css/ui-dialog.css?v=5802af8c">
    <link rel="stylesheet" href="../assets/css/ui-pager.css?v=a625c148">
    <link rel="stylesheet" href="../assets/css/preorder.css?v=1d412bb3">
</head>
<body>
    <header>
        <div class="header">
            <h1 class="logo">
                <a href="../index.html?v=3f1dd391">94hi.tw就是嗨！</a>
            </h1>

            <ul class="nav">
                <li>
                    <a href="../index.html?v=3f1dd391">首頁</a>
                </li>
                <li class="current">
                    <a href="../preorder.html?v=1f097572">遊戲預購</a>
                </li>
                <li>
                    <a href="../games/all.html?v=47f4bf4e">遊戲大廳</a>
                </li>
                <li>
                    <a href="../member.html?v=a84b1fd2">會員中心</a>
                </li>
                <li>
                    <a href="../purchase/platform/step1.html?v=edf059ca">購點儲值</a>
                </li>
                <li>
                    <a href="../cs/help.html?v=6bd7523c">客戶服務</a>
                </li>
            </ul>

            <div class="user">
                <!-- 未登入 -->
                <div class="user-unlogin">
                    <a href="../login/password.html?v=93b07171">登入</a>
                    <a href="../join/phone.html?v=de58f796">註冊</a>
                </div>

                <!-- 已登入 -->
                <!-- <div class="user-logined" id="j-user-logined">
                    <a href="javascript:;" class="user-name">漲帳戶姓名</a>

                    <ul class="user-menu">
                        <li>咪曉那</li>
                        <li>
                            <a href="">我的帳號</a>
                        </li>
                        <li>
                            <a href="">會員任務</a>
                        </li>
                        <li>
                            <a href="">會員月卡</a>
                        </li>
                        <li>
                            <a href="">會員季卡</a>
                        </li>
                        <li>
                            <a href="">切換會員帳號</a>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>

        <div class="page-header">
            <div class="page-header-con con">
                <h2 class="page-title">遊戲預購</h2>

                <ul class="page-nav">
                    <li class="current">
                        <a href="../preorder.html?v=1f097572">ALL</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <main>
        <div class="main preorder">
            <section class="preorder-detail preorder-con con con-bg">
                <div class="preorder-detail-hd">
                    <aside>
                        <i class="preorder-pic" style="background-image: url(../assets/images/pic-1.jpg);"></i>
                    </aside>
                    <main>
                        <h3 class="preorder-title">Crimson Desert 赤血沙漠｜2019 G-Star 正式揭露，旗艦級 MMORPG</h3>
                        <h4 class="preorder-producer">開發商：Abys</h4>

                        <div class="preorder-meta">
                            <p>
                                <strong>NT$ 10,258,300</strong>
                                目標：11,000.000
                            </p>
                            <p>
                                <strong>1,003</strong>
                                人預購
                            </p>
                            <p>
                                <strong>32</strong>
                                天結束
                            </p>
                        </div>

                        <div class="preorder-menu">
                            <div class="preorder-share">
                                <a href="" class="facebook">分享</a>
                                <a href="" class="line">分享</a>
                            </div>
                        </div>
                    </main>
                </div>

                <div class="preorder-detail-bd">
                    <div class="preorder-time-progress">
                        <p class="time">遊戲預購於 2019/11/23 14:00 開始</p>
                        <!--
                            completed 進度100% 樣式
                         -->
                        <div class="preorder-progress">
                            <i style="width: 50%;">
                                <!-- <span>兄弟，我們成功了！</span> -->
                                <span>已達成 50%，衝阿！</span>
                            </i>
                        </div>
                    </div>

                    <div class="preorder-product">
                        <h3 class="preorder-product-tip">←  左右滑動逛逛預購項目  →</h3>

                        <div class="preorder-product-con" id="j-preorder-product">
                            <ul class="preorder-product-list j-product-wrapper">
                                <li class="j-product-slide">
                                    <a href="buy.html?v=7552b891" class="preorder-product-item">
                                        <div class="item-hd">
                                            <strong class="product-money">NT$ 3,999</strong>
                                        </div>
                                        <div class="item-bd">
                                            <h4 class="product-title">天長地久包年包不是白獅包也不是白痴包</h4>
                                            <div class="preorder-product-tag">
                                                <b>1,000 人預購</b>
                                                <!--
                                                    red 限時樣式
                                                    orange 限量樣式
                                                 -->
                                                <b class="red">限時</b>
                                            </div>
                                            <p class="product-desc">
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容
                                            </p>
                                        </div>
                                        <div class="item-ft">限量預購 1,000 份</div>
                                    </a>
                                </li>

                                <li class="j-product-slide">
                                    <a href="buy.html?v=7552b891" class="preorder-product-item">
                                        <div class="item-hd">
                                            <strong class="product-money">NT$ 3,999</strong>
                                        </div>
                                        <div class="item-bd">
                                            <h4 class="product-title">天長地久包年包不是白獅包也不是白痴包</h4>
                                            <div class="preorder-product-tag">
                                                <b>1,000 人預購</b>
                                                <!--
                                                    red 限時樣式
                                                    orange 限量樣式
                                                 -->
                                                <b class="red">限時</b>
                                            </div>
                                            <p class="product-desc">
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容
                                            </p>
                                        </div>
                                    </a>
                                </li>

                                <li class="j-product-slide">
                                    <a href="buy.html?v=7552b891" class="preorder-product-item">
                                        <div class="item-hd">
                                            <strong class="product-money">NT$ 3,999</strong>
                                        </div>
                                        <div class="item-bd">
                                            <h4 class="product-title">天長地久包年包不是白獅包也不是白痴包</h4>
                                            <div class="preorder-product-tag">
                                                <b>1,000 人預購</b>
                                                <!--
                                                    red 限時樣式
                                                    orange 限量樣式
                                                 -->
                                                <b class="orange">限量</b>
                                            </div>
                                            <p class="product-desc">
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容
                                            </p>
                                        </div>
                                        <div class="item-ft">限量預購 1,000 份</div>
                                    </a>
                                </li>

                                <li class="j-product-slide">
                                    <a href="buy.html?v=7552b891" class="preorder-product-item">
                                        <div class="item-hd">
                                            <strong class="product-money">NT$ 3,999</strong>
                                        </div>
                                        <div class="item-bd">
                                            <h4 class="product-title">天長地久包年包不是白獅包也不是白痴包</h4>
                                            <div class="preorder-product-tag">
                                                <b>1,000 人預購</b>
                                                <!--
                                                    red 限時樣式
                                                    orange 限量樣式
                                                 -->
                                                <b class="orange">限量</b>
                                            </div>
                                            <p class="product-desc">
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容
                                            </p>
                                        </div>
                                        <div class="item-ft">限量預購 1,000 份</div>
                                    </a>
                                </li>

                                <li class="j-product-slide">
                                    <a href="buy.html?v=7552b891" class="preorder-product-item">
                                        <div class="item-hd">
                                            <strong class="product-money">NT$ 3,999</strong>
                                        </div>
                                        <div class="item-bd">
                                            <h4 class="product-title">天長地久包年包不是白獅包也不是白痴包</h4>
                                            <div class="preorder-product-tag">
                                                <b>1,000 人預購</b>
                                                <!--
                                                    red 限時樣式
                                                    orange 限量樣式
                                                 -->
                                                <b class="orange">限量</b>
                                            </div>
                                            <p class="product-desc">
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容<br>
                                                ● 條列式預購商品內容
                                            </p>
                                        </div>
                                        <div class="item-ft">限量預購 1,000 份</div>
                                    </a>
                                </li>
                            </ul>

                            <div class="preorder-product-scrollbar preorder-scrollbar j-product-scrollbar"></div>

                            <button type="button" class="preorder-scrollbar-prev j-product-scrollbar-prev">上一個</button>
                            <button type="button" class="preorder-scrollbar-next j-product-scrollbar-next">下一個</button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <section class="footer">
            <div class="footer-con">
                <h2 class="footer-logo">94hi.tw就是嗨！</h2>

                <ul class="footer-nav">
                    <li>
                        <a href="../about.html?v=e3d56ca7">關於我們</a>
                    </li>
                    <li>
                        <a href="../contract.html?v=a87fe0ec">會員條款</a>
                    </li>
                    <li>
                        <a href="../privacy.html?v=fbd6c7f7">隱私權政策</a>
                    </li>
                    <li>
                        <a href="../regulation.html?v=bfff213c">遊戲管理規章</a>
                    </li>
                    <li>
                        <a href="../contact.html?v=33d6445f">商務接洽</a>
                    </li>
                </ul>
            </div>
        </section>

        <section class="copyright">
            <div class="copyright-con">
                <p class="copyright-content">紅番茄愛娛樂股份有限公司 ©2020 Happy Tomato All Rights Reserved</p>

                <ul class="contact">
                    <li>
                        <a href="" class="line">line</a>
                    </li>
                    <li>
                        <a href="" class="facebook">facebook</a>
                    </li>
                </ul>
            </div>
        </section>
    </footer>

    <script src="../assets/js/lib/vue.min.js"></script>
    <script src="../assets/js/lib/swiper.min.js"></script>
    <script src="../assets/js/core.js?v=5bb552e3"></script>
    <script src="../assets/js/product.js?v=75c0f05c"></script>
</body>
</html>
